<template>
  <div class="star">
    <i class="star-item" v-for="(itemClass,index) in itemClasses" :key='index' :class="itemClass" ></i>
  </div>
</template>

<script>
  //星星的长度
  const  LENGTH=5
  //星星的状态
  const CLS_ON='on'
  const CLS_off='off'
    export default {
    data(){
      return{
        // score:''
      }
    },
    props:{
      score:{
        type:Number,
      }
    } ,
      computed:{
      itemClasses(){

        let result=[]

        //全星
        let integer=this.score

        //遍历全星
        for(let i=0;i<integer;i++){
          result.push(CLS_ON)
        }

//补齐
        while(result.length<LENGTH){
          result.push(CLS_off)

        }

        return result
      }
    },
    }
</script>

<style scoped>




  .star{
    font-size: 0;
    padding-top: 5px;
  }
  .star .star-item{
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 3px;
    background-repeat: no-repeat;
    background-size: 14px 14px;
  }
  .star .star-item:last-child{
    margin-right: 0;
  }
  /* 二种图片类型*/
  .star .on{
    background-image: url('../../assets/img/star1.png');
  }

  .star .off{
    background-image: url('../../assets/img/star2.png');
  }
  .collectWrapper .star3{

    display: inline-block;
    width: 16px;
    height: 15px;
    background-size: 16px 15px;
    background-image: url('../../assets/img/wdsc.png');
  }
</style>
